<template>
	<view class="body">
		<swiper class="swiper" :indicator-dots="indicatorDots"   :duration="duration">
		<swiper-item v-for="(item,index) in list" :key="index">
			<image :src="item" mode=""></image>
		</swiper-item>
	   
	</swiper>
			
			<view class="yuan" @tap="shoucang">
				<image src="../../../../static/icons/collect.png" mode=""></image>
			</view>		
					
		
		<view class="p1">
			{{p1}}
		</view>
		
		<view class="p2">
			{{p2}}
		</view>
		
		<view class="p3">
			¥{{p3}}
		</view>
		
		<view class="p4" v-html="p4">
			{{p4}}
		</view>
		
		
	</view><!-- body -->
</template>

<script>
	import {
		detail
	} from "../../../../util/kind/kind.js"
	export default {
		data() {
			return {
				list:[],
				p1:"",
				p2:"",
				p3:"",
				p4:"",
				 duration: 500,
				 indicatorDots: true,
				 obj:{}
			};
		},
		methods:{
			shoucang(){
				this.obj.img = this.list[0]
				this.obj.name = this.p1
				this.obj.price = this.p3
				uni.setStorageSync("obj",this.obj)
				
				
				console.log(1)
			}
		},
	async	onLoad(val) {
		
		
			var res = await detail({
				productId:val.id
			})
			console.log(res)
			this.list = res.data.data.imgs.split(",");
			this.p1 = res.data.data.detail_title;
			this.p2 = res.data.data.detail_desc;
			this.p3 = res.data.data.price_in;
			this.p4 = res.data.data.content;
			
			
			uni.setNavigationBarTitle({
				title: '商品详情',
			
			});
			uni.setNavigationBarColor({
			
				frontColor: '#ffffff',
				backgroundColor: ' #354E44',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.body {
		position: relative;
		background-color: #F1ECE7;
		width: 100%;
		height: 100%;

	}
	
	.swiper{
		width: 100%;
		height: 635rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.yuan{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #354E44;
		right: 96rpx;
		top: 585rpx;
		image{
			margin-top: 25rpx;
			margin-left: 30rpx;
			width: 43rpx;
			height: 44rpx;
			
		}
	}
	
	.p1{
		margin-top: 100rpx;
		margin-left: 100rpx;
		font-size: 36.4rpx;
		color: #3E3E3E;
		font-weight: bold;
	}
	
	.p2{
		
	margin-left: 100rpx;
	font-size: 30.8rpx;
	color: #B0B0B0;
		
	}
	
	.p3{
		margin-top: 20rpx;
		margin-left: 100rpx;
		font-size: 36.4rpx;
		color: #3E3E3E;
	}
	
	.p4{
		margin-top: 60rpx;
		margin-left: 100rpx;
	
	}

</style>
